<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <table>
    <tr>
      <td>编号</td>
      <td>姓名</td>
      <td>年龄</td>
      <td>操作</td>
    </tr>
    <tr v-for="user in users">
      <td>{{user.id}}</td>
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
      <td>
        <a href="javascript:void(0)" @click="delUser(user.id)">删除</a>
        <a href="#">修改</a>
      </td>
    </tr>
  </table>
</div>




<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      users: [
        {id: 1001, name: "张三", age: 20},
        {id: 1010, name: "李四", age: 22},
        {id: 1030, name: "王五", age: 24}
      ]
    },
    methods:{
      delUser:function (userId) {
        if( confirm(`确定要删除 ${userId} 的用户信息吗？`)){
          // 如果要做删除操作的话，只要把数据中的数据移除就可以了
          // 找位置
          var index = -1;
          for(var i =0; i<this.users.length; i++){
            if(this.users[i].id == userId){
              index = i;
              break;
            }
          }
          // 如果找到，就删除
          if(index != -1){
            // 数组中删除指定位置的元素的方法是：  splice(开始的下标位置，要删除的个数)
            this.users.splice(index,1);
          }
        }
      }
    }
  });
</script>
</body>
</html>
